<template>
  <Card>
    <Button class="new-btn-sty" @click="addLabel({})"><Icon type="md-add" /> 添加材料标签</Button>
    <Modal v-model="modalEdit" title="材料标签" width="700" cancel-text="关闭"
           @on-ok="ok(paramData2)" @on-cancel="modalEdit=false" ok-text="确定">
      <Form :model="paramData2" >
        <Row class="item1" style="height:auto;line-height:auto">
          <Col span="5" style="text-align: right" class="">标签名称:</Col>
          <Col span="12" offset="1">
            <Input v-model="paramData2.labelname" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </Col>
        </Row>
        <Input v-model="paramData2.edit" v-show="show"></Input>
      </Form>
    </Modal>
    <Table border :columns="columns1" :data="datalist"></Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
  </Card>
</template>

<script>

import { addLabel, deletematerialsLabel, editLabel, loadLabelList } from '@/api/eventlist'

export default {
  name: 'electronicmaterialslabel',
  data () {
    return {
      show: false,
      modalEdit: false,
      paramData2: {},
      datalist: [],
      loadData: true,
      columns1: [
        {
          title: '标签名称',
          key: 'labelname'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 60,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', backgroundColor: '#598ED1', borderColor: '#598ED1' },
                on: {
                  click: () => {
                    let edit = 0
                    this.addLabel(params.row, edit)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            )
            return h('div', temp)
          }
        }
      ]
    }
  },
  methods: {
    init (param) {
      loadLabelList(param).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取通知公告列表失败', desc: res.data.errmsg })
        }
      })
    },
    addLabel (item, edit) {
      this.modalEdit = true
      this.paramData2.id = item.id || null
      this.paramData2.labelname = item.labelname || ''
      this.paramData2.edit = edit
    },
    remove (item) {
      if (confirm('确定删除该条数据吗')) {
        deletematerialsLabel({ id: item.id }).then(res => {
          if (res.data.errcode === 0) {
            this.init(this.params)
            return
          }
          this.$Notice.error({ title: '删除失败', desc: res.errmsg })
        })
      }
    },
    ok (param) {
      if (param.edit === 0) {
        editLabel(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '' })
            this.init(null)
          } else {
            this.$Notice.error({ title: '失败', desc: res.data.errmsg })
          }
        })
      } else {
        addLabel(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '' })
            this.init(null)
          } else {
            this.$Notice.error({ title: '失败', desc: res.data.errmsg })
          }
        })
      }
    }
  },
  mounted () {
    this.init(null)
  }
}
</script>

<style scoped>
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
